<template>
  <a-tooltip :title="`支持扩展名：${acceptFiles}`" placement="topLeft">
    <a-button id="browse" type="primary"> 请选择文件 </a-button>
  </a-tooltip>
  <!-- <a-modal v-model:visible="visible" title="上传文件" :width="700" @cancel="handleCancel"> -->
		<!-- <a-table :data-source="fileRawList" :columns="columns" :pagination="false" :showHeader="false">
			<template #name="{ record }">
				<span>{{ record.name }}</span>
			</template>
			<template #size="{ record }">
				<span>{{ record.size }}</span>
			</template>
			<template #status="{ record }">
				<span v-if="record.status === -1">正在计算MD5</span>
				<span v-if="record.status === 1 && record.percent === 0"
					>MD5计算完成，准备上传</span
				>
				<span v-if="record.status === 4" style="color: brown">上传失败</span>
				<span v-if="record.status === 5" style="color: chartreuse"
					>已上传</span
				>
				<a-progress
					v-if="record.percent || record.percent === 0"
					:strokeWidth="10"
					:percent="record.percent"
					:v-if="
						record.status === 2 || (record.status === 1 && record.percent > 0)
					"
				/>
			</template>
			<template #action="{ record }">
				<span @click="deleteFile(record)" style="color: red;cursor: pointer;">
					<DeleteOutlined />
				</span>
			</template>
		</a-table>
		<template #footer>
			<a-button :disabled="uploading" type="default"> 关闭 </a-button>
			<a-button :disabled="uploading" type="primary"> 开始上传 </a-button>
			</template> -->
  <!-- </a-modal> -->
</template>

<script>
	import { DeleteOutlined } from '@ant-design/icons-vue';
// import plupload from "plupload";
// import FileMd5 from '@/utils/file-md5.js'
export default {
  name: "Introduce",
  components: { DeleteOutlined },
  props: {
    // 文件上传类型限制
    // acceptFiles: {
    //   type: String,
    //   default: '.png,.jpg,.bmp,.doc,.docx,.xls,.xlsx,.pdf,.rar,.zip'
    // },
    limit: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      acceptFiles:
        ".txt,.png,.jpg,jpeg,.mp3,.mp4,.doc,.docx,.xls,.xlsx,.ppt,.pdf,.rar,.zip",
      fileRawList: [
        {
          name: "文件1文件文件文件文件文件文件文件",
          key: "",
          status: 1,
          percent: 0,
					size: '1M'
        },
				{
          name: "文件1",
          key: "",
          status: 1,
          percent: 0,
					size: '1M'
        }
      ],
      columns: [
        {
          title: "文件名",
          dataIndex: "name",
          width: 100,
          slots: { customRender: "name" },
        },
				{
          title: "大小",
          dataIndex: "size",
          width: 50,
          slots: { customRender: "size" },
        },
        {
          title: "状态",
          dataIndex: "status",
          width: 130,
          slots: { customRender: "status" },
        },
        {
          title: "操作",
          key: "action",
          width: 20,
          slots: { customRender: "action" },
        },
      ],
      visible: false,
			up: {}
    };
  },
  mounted() {
    // this.pluploadInit();
  },
  watch: {
    // up(val) {
    //   console.log(val)
    //   this.fileRawList = this.fileList.concat(val.files)
    // },
    acceptFiles(val) {
      this.up.refresh();
    },
  },
  // methods: {
  //   pluploadInit() {
  //     var that = this;
  //     var uploader = new plupload.Uploader({
  //       browse_button: "browse", //触发文件选择对话框的按钮，为那个元素id
  //       url: "upload.php", //服务器端的上传页面地址
  //       flash_swf_url: "js/Moxie.swf", //swf文件，当需要使用swf方式进行上传时需要配置该参数
  //       silverlight_xap_url: "js/Moxie.xap", //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
  //       init: {
  //         BeforeUpload(up, file) {
	// 					console.log(up, file)
  //           // 上传时的附加参数，以键/值对的形式传入
  //           // up.setOption("multipart_params", {
  //           //   size: file.size,
  //           //   md5: file.md5
  //           // });
  //         },
  //         FilesAdded(up, files) {
  //           console.log("FilesAdded", files);
  //           that.fileRawList.push(...files);
	// 					if (that.fileRawList.length) {
	// 						that.visible = true
	// 					}
  //           // if (that.fileRawList.length > that.limit) {
  //           //   that.deleteFile(that.fileRawList[0]);
  //           // }
  //           files.forEach((f) => {
  //             f.status = -1;
  //             FileMd5(f.getNative(), (e, md5) => {
  //               f["md5"] = md5;
  //               f.status = 1;
  //             });
  //           });
  //         },
  //         FilesRemoved(upp, files) {
  //           that.uploading = false;
  //         },
  //         FileUploaded(up, file, info) {
  //           if (info.status === 200) {
  //             console.log("FileUploaded", info.response);
  //             const { path } = JSON.parse(info.response).data;
  //             file.url = path;
  //             that.up.refresh();
  //             that.$emit("onChange", that.fileRawList);
  //           }
  //         },
  //         UploadComplete(up, files) {
  //           that.uploading = false;
  //         },
  //         Error(up, args) {
  //           that.uploading = false;
  //         },
  //       },
  //     });
  //     uploader.init();
  //   },
  //   handleCancel() {},
	// 	// 删除
	// 	deleteFile () {}
  // },
};
</script>

<style>
</style>